<template>
  <div>
    <!--头部 全局组件 复用 -->
    <el-card shadow="always" style="margin-top:20px;">
      <!-- getCategoryId自定义事件 实现子组件通信父组件 拿到三级联动选择的id -->
      <CategorySelect @getCategoryId="getCategoryId" :show="isShow != 0" />
    </el-card>

    <!-- 内容结构 -->
    <el-card shadow="always" style="margin-top:20px;">
      <!-- 主内容 -->
      <div v-show="isShow == 0">
        <el-button plain type="primary" icon="el-icon-plus" style="margin-bottom:15px" @click="addSpu"
          :disabled="!categoryId.category3Id">添加SPU</el-button>
        <el-table border style="width: 100%" :data="records">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="250" align="center"></el-table-column>
          <el-table-column prop="description" label="SPU描述" align="center"></el-table-column>
          <el-table-column prop="prop" label="操作" align="center" width="250">
            <!-- 在elemetUI中自定义结构 需要使用作用域插槽 -->
            <template slot-scope="{row}">
              <el-button type="success" plain icon="el-icon-plus" size="mini" title="添加sku" @click="AddSku(row)">
              </el-button>
              <el-button type="warning" icon="el-icon-edit" plain size="mini" title="修改spu" @click="updateSpu(row)">
              </el-button>
              <el-button type="info" plain icon="el-icon-info" size="mini" title="查看sku" @click="LookSku(row)">
              </el-button>
              <el-button type="danger" icon="el-icon-delete-solid" plain size="mini" title="删除spu"
                @click="deleteSpu(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器-->
        <el-pagination align="center" style="margin-top:15px" :current-page="page" :page-sizes="[3, 5, 10]"
          :page-size="limit" :total="total" @current-change="getSpuList" background @size-change="handleSizeChange"
          layout="prev,pager,next,jumper,->,sizes,total">
        </el-pagination>
      </div>

      <!-- 修改/添加Spu组件 -->
      <UpdateSpu v-show="isShow == 1" @changeScenarios="changeScenarios" ref="updateAddSpu" />
      <!-- 添加Sku组件 -->
      <AddSku v-show="isShow == 2" ref="addSku" @changeScenarios="changeScenarios" />
    </el-card>
    <!-- 查看sku -->
    <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
      <el-table border :data="skuInfo" v-loading="loading">
        <el-table-column prop="skuName" label="名称" width="150" align="center"></el-table-column>
        <el-table-column prop="price" label="价格" width="200" align="center"></el-table-column>
        <el-table-column prop="weight" label="重量" align="center"></el-table-column>
        <el-table-column label="默认图片" align="center">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" style="width:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import AddSku from './addSku'//添加Sku页面
import UpdateSpu from './updateAddSpu'//添加Sku页面
export default {
  name: 'Spu',
  data() {
    return {
      // 存储从三级联动子组件传递选中的id
      categoryId: {},
      // 初始化带给服务器的参数
      page: 1,//当前第几页
      limit: 3,//当前页显示多少条数据
      records: [],//存储服务器返回的数据（SKU列表的数据）
      total: 0,//存储服务器返回一共展示的数据
      isShow: 0,//控制添加/修改页面结构的切换
      dialogTableVisible: false,//控制查看sku弹出框
      spu: [],//存储用于渲染页面的spu信息
      skuInfo: [],//存储服务器响应的sku信息
      loading:false//加载效果
    }
  },
  methods: {
    // 自定义事件 接收从子组件传递过来的三级联动选中的id
    getCategoryId(id) {
      this.categoryId = id
      this.addSUP = false
      this.getSpuList();
    },
    // 获取SPU列表数据
    async getSpuList(pages = 1) {//pages是分页器组件传递的
      this.page = pages
      //带给服务器的参数：page当前页码 limit当前显示多少条数据 category3Id三级ID
      const { page, limit } = this
      const { category3Id } = this.categoryId
      const result = await this.$API.spu.reqSpuList(page, limit, category3Id)
      if (result.code == 200) {
        this.records = result.data.records
        this.total = result.data.total
      }
    },
    // 分页器显示数据条数发生变化 limit是elementui封装好回传的当前显示数据的条数
    handleSizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    // 添加SPU按钮的回调
    addSpu() {
      this.isShow = 1
      // 通知子组件updateAddSpu发请求
      this.$refs.updateAddSpu.addSpuData(this.categoryId.category3Id)

    },
    // 修改某一个Spu按钮的回调
    updateSpu(row) {
      this.isShow = 1
      // 获取子组件updateAddSpu
      // 在父组件当中可以通过$ref获取子组件并且可以拿到子组件中的数据(需要在子组件标签打上ref)
      // 调用通过子组件标签的ref调用子组件中的方法
      this.$refs.updateAddSpu.initSpuData(row)

    },
    // 自定义事件：子组件通信父组件，切换页面显示
    changeScenarios({ scene, flag }) {
      this.isShow = scene

      //子组件通知父组件切换场景，需要再次获取SPU列表的数据进行展示
      if (flag == "修改" || flag == "取消") {
        this.getSpuList(this.page);
      } else {
        this.getSpuList();
      }
    },
    // 删除SPU
    deleteSpu(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
           const result = await this.$API.spu.reqDeleteSpu(row.id)
          if (result.code == 200) {
             this.$message({
                type: 'success',
                message: '删除成功!'
             });

            //代表SPU个数大于1删除的时候停留在当前页，如果SPU个数小于1 回到上一页
            this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
          }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    // 添加sku
    AddSku(row) {
      // 显示sku页面
      this.isShow = 2

      // 通过子组件的ref调用子组件中的方法
      this.$refs.addSku.getData(row, this.categoryId)
    },
    // 查看SKU
    async LookSku(row) {
      this.loading=true//开启加载效果
      this.spu = row
      this.dialogTableVisible = true//打开弹出框

      try {
        const result = await this.$API.spu.reqGetSkuList(row.id);
        if (result.code == 200) {
          this.skuInfo = result.data
          this.loading=false//关闭加载效果
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 关闭查看sku的弹出框
    close(done) {
      // 调用关闭函数
      done()
      this.skuInfo=[]
    }
  },
  components: { AddSku, UpdateSpu }
}
</script>

<style>
</style>